<template>
	<view class="">
		<!-- <view class="progress">
			<image src="../../static/order/progress.png" mode=""></image>
		</view> -->
		<view class="tittle">个人信息</view>
		<view class="a">
			<view class="tittle_example">使用OCR拍照可以更加快速录入个人身份信息</view>
			<view class="camera" @click="camera"><image src="../../static/order/icon_01.png" mode=""></image></view>
			<view class="camera" @click="cameraa"><image src="../../static/order/icon_02.png" mode=""></image></view>
		</view>

		<view class="item">
			<view class="left">姓名</view>
			<view class="right"><input type="text" v-model="cusName" @input="cusNameInput" placeholder="请输入姓名" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="tips" v-if="flag1">请输入中文</view>
		<view class="item">
			<view class="left">身份证号码</view>
			<view class="right"><input type="text" v-model="idcard" placeholder="请输入身份证号码" @input="idcardInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="tips" v-if="flag3">请输入正确信息</view>
		<view class="item" style="display: none;">
			<view class="left">性别</view>
			<view class="right"><input type="text" v-model="sex" placeholder="请选择性别" @input="sexInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item" style="display: none;">
			<view class="left">民族</view>
			<view class="right"><input type="text" v-model="minzu" placeholder="请输入民族" @input="minzuInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item" style="display: none;">
			<view class="left">出生日期</view>
			<view class="right"><input type="text" v-model="birthday" placeholder="请输入出生日期" @input="birthInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item" style="display: none;">
			<view class="left">住址</view>
			<view class="right"><input type="text" style="font-size: 14px" v-model="address" placeholder="请输入居住地址" @input="addressInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item" style="display: none;">
			<view class="left">有效期(开始日期)</view>
			<view class="right"><input type="text" v-model="ydata02" placeholder="请输入有效期(开始日期)" @input="yxqxInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item" style="display: none;">
			<view class="left">有效期(结束日期)</view>
			<view class="right"><input type="text" v-model="ydata03" placeholder="请输入有效期(结束日期)" @input="yxqxInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="item">
			<view class="left">手机号码</view>
			<view class="right">
				<input type="number" v-model="phone" placeholder="请输入手机号码" maxlength="18" @input="phoneInput" placeholder-style="line-height:44px"/>
			</view>
		</view>
		<view class="tips" v-if="flag4">请输入正确信息</view>
		<view class="item">
			<view class="left">开户行</view>
			<view class="right"><input type="text" v-model="bank" placeholder="请输入开户行" @input="bankInput" placeholder-style="line-height:44px" /></view>
		</view>
		<view class="tips" v-if="flag2">请输入中文</view>
		<view class="item">
			<view class="left">银行账号</view>
			<view class="right">
				<input type="number" v-model="bankNo" placeholder="请输入银行账号" @input="bankNoInput" placeholder-style="line-height:44px" />
			</view>
		</view>
		<view class="item">
			<view class="left">业务员电话</view>
			<view class="right">
				<input type="number" v-model="createBy" placeholder="请输入业务员电话" @input="createByInput" placeholder-style="line-height:44px" />
			</view>
		</view>
		<!-- <view class="tips" v-if="flag5">请输入正确信息</view> -->

		<view class="remind">
			<view class="dagou" :class="flag ? 'active' : ''" @click="tabDagou"></view>
			<view class="tishi">
				本人阅读并同意
				<text @click="geren">《大数据授权书》</text>
				<text @click="zhengxin">《个人信息使用授权书》</text>
			</view>
		</view>
		<view class="god">【重要提示】为了保障您的合法权益，请您务必认真阅读、充分理解本授权书所有条款。您的登录、勾选、点击或确认等行为均被视为您已阅读并同意本授权书。</view>

		<view class="bottom">
			<!-- <view class="save_btn">保存记录</view> -->
			<view class="submit_btn" @click="submit">点击申请</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			colorClear: 'yes',
			colorList: [
				{
					label: '',
					value: 'yes'
				}
			],
			cusName: '',
			idcard: '',
			phone: '',
			bank: '',
			bankNo: '',
			data: '',
			orderName: '',
			sex:'',
			minzu:'',
			birthday:'',
			address:'',
			createBy:'', // 业务员手机号
			ydata02:'', //有效期(开始日期)
			ydata03:'', //有效期(结束日期)
			odata39:'', // 微信openid
			query11:'', // 身份证正面
			query12:'', // 身份证反面
			flag: false,
			flag1: false,
			flag2: false,
			flag3: false,
			flag4: false,
			flag5: false
		};
	},
	onLoad(e) {
		this.orderName = e.query02;
		console.log(this.orderName);
		this.phone = uni.getStorageSync('ht_phone');
	},
	methods: {
		onGroupChange(e) {
			console.log(e);
		},
		tabDagou() {
			this.flag = !this.flag;
		},
		submit() {
			if (this.cusName == null || this.cusName == '') {
				uni.showModal({
					title: '请输入姓名',
					showCancel: false
				});
				return false;
			}
			if (this.idcard == null || this.idcard == '') {
				uni.showModal({
					title: '请输入身份证号',
					showCancel: false
				});
				return false;
			}
			var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if (!regIdNo.test(this.idcard)) {
				uni.showModal({
					title: '身份证号填写有误',
					showCancel: false
				});
				this.idcard = '';
				return false;
			}
			if (this.phone == null || this.phone == '') {
				uni.showModal({
					title: '请输入电话',
					showCancel: false
				});
				return false;
			}
			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				uni.showModal({
					title: '手机号码有误，请重填',
					showCancel: false
				});
				this.phone = '';
				return false;
			}
			if (this.bank == null || this.bank == '') {
				uni.showModal({
					title: '请输入开户行',
					showCancel: false
				});
				return false;
			}
			if (this.bankNo == null || this.bankNo == '') {
				uni.showModal({
					title: '请输入银行账号',
					showCancel: false
				});
				return false;
			}
			if(this.createBy == null || this.createBy == ''){
				uni.showModal({
					title: '请输入业务员手机号',
					showCancel: false
				});
				return false;
			}
			if (!this.flag) {
				uni.showModal({
					title: '请勾选并同意该协议',
					showCancel: false
				});
				return false;
			}
			let data = {
				createBy: this.createBy, // 业务员手机号
				odata39: uni.getStorageSync("zs_openid"),
				query01: this.orderName,
				query03: this.cusName,
				query02: this.idcard,
				query04: this.phone,
				data08: this.bank,
				data09: this.bankNo,
				query11: this.query11, // 身份证正面
				query12: this.query12, // 身份证反面
				query38: JSON.parse(uni.getStorageSync("zs_user_info")).headimgurl,
				ydata01: this.address,// 户籍地址
				ydata02: this.ydata02, // 有效期(开始日期)
				ydata03: this.ydata03, // 有效期(结束日期)
				ydata04: this.sex, // 性别
				ydata05: this.minzu, // 民族
				ydata06: this.birthday, // 生日
				sysOrgCode: 'A01'
			};
			uni.showLoading({
				title: '正在上传...'
			});
			uni.request({
				url: this.$url + 'buse/fxjBuse_01/addapi',
				data: data,
				method: 'POST',
				header: {
					'X-Access-Token': uni.getStorageSync('ht_token'),
					Authorization: uni.getStorageSync('ht_token')
				},
				success: res => {
					console.log(res);
					if (res.data.success) {
						uni.hideLoading();
						uni.showModal({
							title: '提交成功',
							showCancel: false,
							success(e) {
								if (e.confirm) {
									uni.navigateBack({
										delta: 2
									}); //返回上一页面
								}
							}
						});
					}
				}
			});
		},
		camera(e) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					console.log(JSON.stringify(res.tempFilePaths));
					var tempFilePaths = res.tempFilePaths;
					uni.showToast({
						title: '正在上传...',
						icon: 'loading',
						mask: true,
						duration: 20000
					});
					var uploadImgCount = 0;
					for (var i = 0, h = tempFilePaths.length; i < h; i++) {
						uni.uploadFile({
							// url: 'https://oa.sxtcf.com/fxj380/rest/base/uploadsb',
							url: 'https://www.aibaokj.com/fxj-boot/sys/common/uploadsb',
							filePath: tempFilePaths[i],
							name: 'file',
							formData: {
								sbtype: 'idface'
							},
							success: res => {
								uploadImgCount++;
								console.log(res);
								console.log(JSON.parse(res.data));
								if (res.statusCode == '200') {
									let dataOne = JSON.parse(res.data);
									console.log('身份证正面' + this.query11)
									if (dataOne.success) {
										this.query11 = dataOne.message;
										uni.hideToast();
										this.cusName = dataOne.result.name;
										this.idcard = dataOne.result.num;
										this.sex = dataOne.result.sex;
										this.minzu = dataOne.result.nationality;
										this.birthday = dataOne.result.birth;
										this.address = dataOne.result.address;
									} else {
									}
								}
							},
							fail: res => {
								uni.hideToast();
								uni.showModal({
									title: '错误提示',
									content: '上传图片失败',
									showCancel: false
								});
							}
						});
					}
				}
			});
		},
		cameraa(e) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					console.log(JSON.stringify(res.tempFilePaths));
					var tempFilePaths = res.tempFilePaths;
					uni.showToast({
						title: '正在上传...',
						icon: 'loading',
						mask: true,
						duration: 20000
					});
					var uploadImgCount = 0;
					for (var i = 0, h = tempFilePaths.length; i < h; i++) {
						uni.uploadFile({
							url: 'https://www.aibaokj.com/fxj-boot/sys/common/uploadsb',
							filePath: tempFilePaths[i],
							name: 'file',
							formData: {
								sbtype: 'idback'
							},
							success: res => {
								uploadImgCount++;
								console.log(res);
								console.log(JSON.parse(res.data));
								if (res.statusCode == '200') {
									let dataOne = JSON.parse(res.data);
									this.query12 = dataOne.message;
									if (dataOne.success) {
										uni.hideToast();
										this.ydata02 = dataOne.result.start_date;
										this.ydata03 = dataOne.result.end_date;
									} else {
									}
								}
							},
							fail: res => {
								uni.hideToast();
								uni.showModal({
									title: '错误提示',
									content: '上传图片失败',
									showCancel: false
								});
							}
						});
					}
				}
			});
		},
		cusNameInput(e) {
			var cusName = e.detail.value;
			console.log(cusName);
			var nameReg = /^[\u4E00-\u9FA5]{2,4}$/;
			if (!nameReg.test(cusName)) {
				this.flag1 = true;
			} else {
				this.flag1 = false;
			}
		},
		idcardInput(e) {
			this.idcard = e.detail.value;
			console.log(this.idcard);
			var regIdNo = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X]|[x])$/;
			if (!regIdNo.test(this.idcard)) {
				console.log('1');
				this.flag3 = true;
			} else {
				console.log('2');
				this.flag3 = false;
			}
		},
		phoneInput(e) {
			this.phone = e.detail.value;
			console.log(this.phone);
			var phoneReg = /^1[3456789]\d{9}$/;
			if (!phoneReg.test(this.phone)) {
				this.flag4 = true;
			} else {
				this.flag4 = false;
			}
		},
		bankInput(e) {
			this.bank = e.detail.value;
			console.log(this.bank);
			var nameReg = /^[\u2E80-\u9FFF]+$/;
			if (!nameReg.test(this.bank)) {
				this.flag2 = true;
			} else {
				this.flag2 = false;
			}
		},
		bankNoInput(e) {
			this.bankNo = e.detail.value;
			console.log(this.bankNo);
			// this.bankNo.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
			// var nameReg = /^([1-9]{1})(\d{14}|\d{18})$/;
			// if(!nameReg.test(this.bank)){
			// 	this.flag5 = true;
			// }else{
			// 	this.flag5 = false;
			// }
		},
		zhengxin(e) {
			uni.navigateTo({
				url: '/pages/order/dsjsqs'
			});
		},
		geren(e) {
			uni.navigateTo({
				url: '/pages/order/sqs'
			});
		}
	}
};
</script>

<style>
.tips {
	color: red;
	font-size: 26rpx;
	height: 40rpx;
	line-height: 40rpx;
	padding-left: 50rpx;
}
.progress {
	margin: 60rpx 72rpx 40rpx 72rpx;
	width: 606rpx;
	height: 84rpx;
}

.progress image {
	width: 606rpx;
	height: 84rpx;
}

.tittle {
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-left: 30rpx;
	margin-top: 30rpx;
}

.a .tittle_example {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(153, 153, 153, 1);
	flex: 1;
}

.a {
	display: flex;
	margin-left: 30rpx;
	margin-top: 8rpx;
}

.a .camera {
	width: 38rpx;
	height: 32rpx;
	/* position: absolute;
	right: 0; */
	margin-right: 30rpx;
}

.a .camera image {
	width: 38rpx;
	height: 32rpx;
}

.item {
	width: 690rpx;
	height: 88rpx;
	background: rgba(250, 250, 250, 1);
	border: 1px solid rgba(230, 230, 230, 1);
	border-radius: 10rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 20rpx;
	display: flex;
}

.item .left {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	line-height: 88rpx;
	margin-left: 20rpx;
}

.item .right {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	/* color:rgba(0,0,0,1); */
	line-height: 88rpx;
	margin-left: 20rpx;
	/* position: absolute;
	right: 0; */
	margin-right: 30rpx;
	flex: 1;
}

.item .right input {
	line-height: 44px;
	text-align: right;
	height: 44px;
	/* color: #cccccc; */
}

.bottom {
	margin: 30rpx;
	text-align: center;
	line-height: 80rpx;
}

.bottom .save_btn {
	width: 335rpx;
	height: 98rpx;
	border: 1px solid rgba(72, 118, 228, 1);
	border-radius: 10rpx;
	margin-right: 20rpx;
	color: #4876e4;
}

.bottom .submit_btn {
	height: 80rpx;
	background: rgba(72, 118, 228, 1);
	border-radius: 44rpx;
	color: #ffffff;
	font-size: 28rpx;
}

.remind {
	font-size: 24rpx;
	display: flex;
	align-items: center;
	margin: 100rpx 30rpx 20rpx;
}

.dagou {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	border: 1rpx solid rgba(72, 118, 228, 1);
	margin-right: 20rpx;
}
.dagou.active {
	background-color: rgba(72, 118, 228, 1);
}

.remind text {
	color: #007aff;
}

.god {
	margin: 0 30rpx;
	font-size: 24rpx;
	/* position: absolute;
	bottom: 0; */
	margin-bottom: 78px;
	width: 690rpx;
}
</style>
